<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<ul>
		<li id="first">1</li>
		<li>2元素</li>
		<li id="three">3元素</li>
		<li>4元素</li>
		<li aaa="456">5</li>
		<li>
			<span>666666</span>
			<span>77777777</span>
			<span>888888</span>
		</li>
		<span>9999999</span>
	</ul>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		// 获取子代元素 ul>span(子代选择器)
		$('ul').children('span').css("background", "red")

		//后代选择器
		$('ul').find('span').css("font-size", "30px")

		// 选出除了自己以外的兄弟节点
		$("#first").siblings('li').css("color","green")

		//获取下一个兄弟节点
		$('#first').next().css("font-weight","700")

		//获取上一个兄弟节点
		$('#three').prev().css("background","pink")

		//获取父亲节点
		$('#three').parent().css("border","1px solid #000")

		//jq不需要循环 隐式迭代 jq自动遍历循环
		console.log($('li'))
		$('li').click(function() {
			console.log(this)//获取当前点击的元素
			console.log($(this).index)//获取当前点击的下标
		})
	</script>
</body>
</html>